{% extends 'base.html.twig' %}

{% block stylesheets %}
    <style>               
        .paint-size{
            position: absolute;
            width: 80%; z-index: 1; height: 82%;
            margin:auto; left: 0; right: 0; top: 10%;
        }
        #body { background-color: #0e212a; }
        /*page parts*/
        .page { width: 100%; height: 100%; position: relative; }
        .game { background: url("{{ imgsrc('images/paint-bg.png') }}") no-repeat top center; background-size: 100%; }
        .game .game-content { position:relative; margin: 0 auto; width: 100%; overflow: hidden; }
        .game .part { width: 100%; height: 100%; }
        .game .layer { top: 0; width: 100%; display: block; position: absolute; }   
        .game .part .stuff { display: none; }
{#        .game .part .stuff:first-child { display: block; }#}
        .game .map .palette { position: absolute; width: 26px; z-index: 11; bottom: 20.5%; margin-left: -10px; display: none; }
        {% for i in 1..8 %}
            .game .palette.palette{{ i }} { left: {{ i * 10 }}%;  }
        {% endfor %}
        .game .map .palette.active { bottom: 21.5%; }
        .game .map .palette-layer1 { display: block; }

        {% set useMask = [1,2,3,6,7,9] %}
        {% for i in 0..5 %}
            .game .part{{ useMask[i] }} { background: url("{{ imgsrc('images/part') }}{{ useMask[i] }}/2.png") no-repeat top center; background-size: 100%; }
            .game .part{{ useMask[i] }} .mask { 
                mask-image: url("{{ imgsrc('images/mask/mask') }}{{ useMask[i] }}.png");
                -webkit-mask-image: url("{{ imgsrc('images/mask/mask') }}{{ useMask[i] }}.png");
                mask-size: 100%;
                -webkit-mask-size: 100%;
            }
        {% endfor %}
        .game .part1.white { background: url("{{ imgsrc('images/part1/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part3.white { background: url("{{ imgsrc('images/part3/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part6.white { background: url("{{ imgsrc('images/part6/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part7.white { background: url("{{ imgsrc('images/part7/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .part9.white { background: url("{{ imgsrc('images/part9/1.png') }}") no-repeat top center; background-size: 100%; }
        .game .impression { width: 58px; position: absolute; top: 0; right: 25px; z-index: 99; }
        .game .btn-play { position: absolute; margin: 0 auto; width: 100%; bottom: 5%; z-index: 20; }
        
        /*send pages*/
        {% for i in 0..8 %}
            .game .part{{ i+1 }} .stuff:nth-child({% if stuffArr[ i ] == 0 %}1{% else %}{{ stuffArr[i] }}{% endif %}) { display: block; }
        {% endfor %}

    </style>
{% endblock %}


{% block body %}
    <div class="game page">
        <div class="game-content">
            <img class="paint-border hpimg"src="{{ imgsrc('images/paint-border.png')}}" alt="">
            <div class="paint-size">
                {% set part1 = ['#fff','#102933', '#2E4698', '#9D1659', '#42B3B3', '#97CF9C', '#FF9166', '#F9EAD5'] %}
                {% set part2 = ['#fff','#E6DBCA', '#8CCCBD', '#F3C047', '#F76930', '#E9487A', '#E96CE3', '#C2A2E6'] %}
                {% set part3 = ['#fff','#009B9F', '#68DBD6', '#8CCCBD', '#F3C047', '#F76930', '#E9487A', '#844DC7'] %}
                {% set part6 = ['#fff','#FEEADD', '#FFB99D', '#FD9772', '#FD9772', '#C4532C', '#A1644D', '#0091BE'] %}
                {% set part7 = ['#fff','#00919B', '#C93F40', '#D89A57', '#BCD462', '#00C286', '#2B50AB', '#B82885'] %}
                {% set part9 = ['#fff','#C9566B', '#FFF477', '#E1B24C', '#42B3B3', '#DA2C72', '#557AC3', '#F9EAD5'] %}
                {% set parts = [part1, part2, part3, '', '', part6, part7, '', part9] %}
                
                {% for i in 1..9 %}
                    <div class="part part{{ i }} layer {% if stuffArr[ i-1 ] == 0 or stuffArr[ i-1 ] == 1 %} white {% endif %}" style="z-index: {{ i }}">               
                        {% for j in 1..8 %}
                            {% if i == 4 or i == 5 or i == 8 %}
                                <img class="stuff stuff{{ j }} layer" src="{{ imgsrc('images/part')}}{{ i }}/{{ j }}.png"/>
                            {% else %}
                                <div class="stuff stuff{{ j }} layer mask" style="background-color: {{ parts[i-1][j - 1] }}; height: 100%;"></div>    
                            {% endif %}                
                        {% endfor %}
                    </div>
                {% endfor %}

            </div>
        </div>
        <div class="impression">
            <img class="hpimg"src="{{ imgsrc('images/impression/')}}{{ impression }}.png">
        </div>
        <a class="btn-play" href="{{ urlFor("index") }}">
            <img class="hpimg" src="{{ imgsrc('images/s-friend-btn-play.png')}}">
        </a>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $(function () {
        });
    </script>
{% endblock %}